const devices = window.screen
const { availWidth } = devices
console.log(devices)

new Vue({
  el: '#app',
  data() {
    return {
      mobile: window.mobile,
      availWidth: availWidth,
      winFontSize: window.winFontSize,
      prizeList: [
        {
          index: 0,
          name: '一等奖一等奖一等奖',
          pic: './img/gifs1.png',
          id: 1,
          message: '恭喜你中了一等奖！'
        },
        {
          index: 0,
          name: '二等奖二等奖二等奖',
          pic: './img/gifs2.png',
          id: 2,
          message: '恭喜你中了二等奖！'
        },
        {
          index: 0,
          name: '三等奖三等奖三等奖',
          pic: './img/gifs3.png',
          id: 3,
          message: '恭喜你中了三等奖！'
        },
        {
          index: 0,
          name: '4号4号4号4号4号4号',
          pic: './img/gifs.png',
          id: 4,
          message: '恭喜你中了4号奖！'
        },
        {
          index: 0,
          name: '5号5号5号5号5号5号',
          pic: './img/gifs.png',
          id: 5,
          message: '恭喜你中了5号奖！'
        },
        {
          index: 0,
          name: '6号6号6号6号6号6号',
          pic: './img/gifs.png',
          id: 6,
          message: '恭喜你中了6号奖！'
        },
        {
          index: 0,
          name: '7号7号7号7号7号7号',
          pic: './img/gifs.png',
          id: 7,
          message: '恭喜你中了7号奖！'
        },
        {
          index: 0,
          name: '8号8号8号8号8号8号',
          pic: './img/gifs.png',
          id: 8,
          message: '恭喜你中了8号奖！'
        },
        {
          index: 0,
          name: '9号9号9号9号9号9号',
          pic: './img/gifs.png',
          id: 9,
          message: '恭喜你中了9号奖！'
        },
        {
          index: 0,
          name: '10号10号10号10号10号10号',
          pic: './img/gifs.png',
          id: 10,
          message: '恭喜你中了10号奖！'
        }
      ],
      isRunning: false,
      baseRunAngle: 360 * 8, //圈数
      luckyIndex: 4, // 模拟中奖下标
      prizeInfo: {}, // 奖品信息
      transitionTime: 12, // 动画时长
      prizeWrap: null,
      lineRotate: []
    }
  },
  computed: {
    rotateAngle() {
      return 360 / this.prizeList.length
    },
    totalRunAngle() {
      const index = this.findIndexById(this.prizeList, this.prizeInfo.id, 'id')
      const totalRunAngle =
        this.baseRunAngle +
        360 -
        index * this.rotateAngle -
        this.rotateAngle / 2
      console.log(totalRunAngle)
      return totalRunAngle
    }
  },
  mounted() {
    this.prizeWrap = this.$refs.prizeWrap
    this.prizeWrap.style = `transform: rotate(-${this.rotateAngle / 2}deg)`
  },
  beforeDestroy() {
    if (this.prizeWrap) {
      this.prizeWrap.removeEventListener('transitionend', this.stopRun)
    }
  },
  created() {
    this.initLine()
  },
  methods: {
    findIndexById(arr, id, idKey = 'id') {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i][idKey] === id) return i
      }
      return -1
    },
    initLine() {
      const DEG = 360

      if (this.prizeList.length) {
        const count = DEG / this.prizeList.length
        for (let i = 0; i < this.prizeList.length; i++) {
          const item = this.prizeList[i]
          item.index = i
          item.id = Number(item.id)
          const start = (i + 1) * count - count
          this.lineRotate.push(`transform: rotate(${start}deg);`)
        }
      }
    },
    getPrizeStyle(index) {
      const degree = this.rotateAngle
      const availWidth = this.availWidth
      let mobile = `width: ${
        (((2 * (availWidth - 100)) / 2) *
          Math.sin(((degree / 2) * Math.PI) / 180)) /
        20
      }rem;`

      const desktop = `width: ${
        2 * 240 * Math.sin(((degree / 2) * Math.PI) / 180)
      }px;`

      return `${this.mobile ? mobile : desktop}
            transform: rotate(${degree * index + degree / 2}deg);
            transform-origin: 50% 100%;
        `
    },
    lotteryProbability() {
      const index = this.luckyIndex
      // 模拟后台返回中奖信息
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(this.prizeList[index])
        }, 400)
      })
    },
    async start() {
      if (!this.isRunning) {
        this.isRunning = true
        console.log('开始抽奖，后台请求中奖奖品')
        const prizeInfo = await this.lotteryProbability()
        console.log('中奖ID>>>', JSON.parse(JSON.stringify(prizeInfo)))
        this.prizeInfo = prizeInfo
        this.startRun()
      }
    },
    startRun() {
      // 先移除旧监听器
      this.prizeWrap.removeEventListener('transitionend', this.stopRun)
      console.log(this.totalRunAngle)
      // 设置动效
      const style = ` transform: rotate(${this.totalRunAngle}deg);
        transition: transform ${this.transitionTime}s;`
      this.prizeWrap.style = style
      // 添加新监听器
      this.prizeWrap.addEventListener('transitionend', this.stopRun)
    },
    stopRun(e) {
      this.isRunning = false
      this.prizeWrap.style = `transform: rotate(${
        this.totalRunAngle - this.baseRunAngle
      }deg);`

      const message = this.prizeInfo.message

      if (this.mobile) {
        this.$dialog.alert({
          title: '抽奖结果',
          message: message
        }).then(() => {})
      } else {
        this.$alert(message, '抽奖结果', {
          confirmButtonText: '确 定',
          callback: (action) => {}
        })
      }
    }
  }
})
